<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/day13/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 1100px;
            height: 600px;
            border: 1px solid #000;
            margin: 10px;
            position: relative;
        }

        .wrap .box {
            width: 100px;
            height: 100px;
            background-color: #6ff;
            position: absolute;
        }
    </style>
</head>

<body>
    <button>start</button>
    <button>stop(false,false)</button>
    <button>stop(false,true)</button>
    <button>stop(true,true)</button>
    <button>stop(true,false)</button>
    <button>finish()</button>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>
<script>
    // $(ele).animate(params,speed,callback)
    // ele      运动的元素
    // params   对象参数 运动的属性及其终点值  {left:1000}  
    // speed    三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    // callback   运动完成之后执行的回调函数



    // 运动队列
    // [{ left: 1000 },{ top: 500 },{ left: 0 },{ top: 0 }]

    // stop([clearQueue],[jumpToEnd])
    // clearQueue  是否清空队列(默认false) 
    //             true  清空队列,队列中后续的运动不在执行
    //             false  不清空队列,快速跳过本地进入下一次

    // jumpToEnd  是否立即到达终点 (默认false)
    //             true  本地运动到达终点(直接跳到本地运动的终点)  => 执行回调函数
    //             false  不立即到达终点(停留在当前位置)   => 不会执行回调函数

    // finish()   停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。


    $("button").eq(0).click(function () {
        $(".box").animate({ left: 1000 }, 2000, function () {
            console.log("运动执行完毕:1");
        }).animate({ top: 500 }, 1000, function () {
            console.log("运动执行完毕:2");
        }).animate({ left: 0 }, 2000, function () {
            console.log("运动执行完毕:3");
        }).animate({ top: 100 }, 1000, function () {
            console.log("运动执行完毕:4");
            // $("button").eq(0).click();
        })
    })

    // stop(false,false)     不清空队列(快速跳过本地进入下一次), 不立即到达终点(由当前位置开始进入下一次运动)     => 由当前位置开始进入下一次运动
    $("button").eq(1).click(function () {
        $(".box").stop(false, false);
    })

    // stop(false,true)     不清空队列(快速跳过本地进入下一次), 立即到达终点(直接跳到本地运动的终点)     => 立即到达本次运动的终点 开始进入下一次运动
    $("button").eq(2).click(function () {
        $(".box").stop(false, true);
    })


    // stop(true,true)     清空队列(队列中后续的运动不在执行), 立即到达终点(直接跳到本地运动的终点)     => 立即结束运动 到达本次运动的终点
    $("button").eq(3).click(function () {
        $(".box").stop(true, true);
    })

    // stop(true,false)     清空队列(队列中后续的运动不在执行), 不立即到达终点(停留在原位置)     
    $("button").eq(4).click(function () {
        $(".box").stop(true, false);
    })

    // finish()
    $("button").eq(5).click(function () {
        $(".box").finish();
    })





</script>

</html>